<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI行程规划 - 泉州文化地图</title>

    <!-- 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">

    <!-- 样式 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/ai.css"> <!-- 新增样式 -->

    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>

<!-- 主体容器 -->
<div class="page-wrapper">

    <!-- 顶部信息栏 -->
    <div class="top-bar">
        <div class="container">
            <span><i class="fas fa-phone"></i> 旅游咨询：1234-567890</span>
            <span><i class="fas fa-clock"></i> 开放时间：08:00 - 18:00</span>
            <div class="language-switcher">
                <a href="#" class="active">中文</a>
                <a href="#">English</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <header class="navbar">
        <div id="navigationBar">
            <div class="logo">
                <img src="images/logo.jpg" alt="泉州文化地图">
                <h1>智游泉州</h1>
            </div>
            <nav class="main-nav">
                <ul class="nav-menu">
                    <li class="nav-item"><a href="index.html">首页</a></li>
                    <li class="nav-item"><a href="heritage-list.html">世遗景点</a></li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        特色体验
                      </a>
                      <div class="dropdown-menu">
                    	<a class="dropdown-item" href="intangible-culture.html">非遗传承</a>
                    	<a class="dropdown-item" href="food-map.html">美食打卡</a>
                    </li>
                    <li class="nav-item"><a href="historical-research.html">历史研学</a></li>
                    <li class="nav-item"><a href="study-materials.html">学习资源</a></li>
                    <li class="nav-item"><a href="ai-itinerary.html">AI行程规划</a></li>
                    <li class="nav-item user-actions">
                        <a href="user-center.html" class="user-icon"><i class="fas fa-user-circle"></i></a>
                    </li>
                </ul>
            </nav>
            <button class="menu-toggle" aria-label="切换导航菜单">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content container ai-container">

        <!-- 页面标题 -->
        <h1 class="section-title">AI行程规划助手</h1>

        <!-- 简介 -->
        <section class="intro-section">
            <p class="lead">
                输入您的旅行偏好，AI将为您定制专属泉州文化之旅。您可自由调整顺序，保存或导出行程。
            </p>
        </section>

        <!-- 左右布局 -->
        <div class="ai-layout">

            <!-- 左侧：输入参数 -->
            <aside class="input-panel">
                <h3>设置您的偏好</h3>

                <form id="itineraryForm">
                    <label for="days">计划天数：</label>
                    <select id="days" required>
                        <option value="">请选择</option>
                        <option value="1">1天</option>
                        <option value="2">2天</option>
                        <option value="3">3天</option>
                    </select>

                    <label for="interests">兴趣方向：</label>
                    <select id="interests" required>
                        <option value="">请选择</option>
                        <option value="文化">文化探索</option>
                        <option value="美食">地道美食</option>
                        <option value="亲子">亲子互动</option>
                        <option value="摄影">摄影打卡</option>
                    </select>

                    <label for="budget">预算范围：</label>
                    <select id="budget" required>
                        <option value="">请选择</option>
                        <option value="低">低（人均≤¥300）</option>
                        <option value="中">中（¥300-¥800）</option>
                        <option value="高">高（¥800以上）</option>
                    </select>

                    <button type="button" onclick="generateItinerary()">🔮 生成行程</button>
                </form>
            </aside>

            <!-- 右侧：AI输出 -->
            <section class="output-panel">
                <h3>您的行程安排</h3>
                <div id="itineraryOutput">
                    <p>请填写偏好并点击“生成行程”按钮。</p>
                </div>
                <div class="action-buttons">
                    <button onclick="exportToPDF()" disabled id="exportBtn">📄 导出PDF</button>
                    <button onclick="saveItinerary()" disabled id="saveBtn">💾 保存行程</button>
                </div>
            </section>

        </div>

    </main>

    <!-- 回到顶部按钮 -->
    <a href="#top" class="back-to-top" aria-label="回到顶部">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-section">
                    <h3>关于本站</h3>
                    <p>"智游泉州"文旅平台致力于打造一站式泉州文化旅游服务平台，整合泉州优质旅游资源，为游客提供智能化、个性化的旅行体验。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 泉州文化旅游发展有限公司 版权所有</p>
                <p>技术支持：<a href="#">2人团队</a></p>
            </div>
        </div>
    </footer>

</div>

<!-- 自定义 JS -->
<script>
function generateItinerary() {
    const days = document.getElementById('days').value;
    const interests = document.getElementById('interests').value;
    const budget = document.getElementById('budget').value;

    if (!days || !interests || !budget) {
        alert("请完整填写所有选项");
        return;
    }

    let output = `<h4>根据您的偏好生成的行程如下：</h4>`;
    output += `<ul class="itinerary-list" id="itineraryList">`;

    // 示例数据
    const sampleData = {
        "1天文化": [
            { name: "开元寺", time: "上午" },
            { name: "清净寺", time: "中午" },
            { name: "泉州博物馆", time: "下午" }
        ],
        "1天美食": [
            { name: "阿秋面线糊", time: "早餐" },
            { name: "泉南佛国润饼", time: "午餐" },
            { name: "钟楼夜市小吃", time: "晚餐" }
        ],
        "2天亲子": [
            { name: "洛阳桥", time: "上午" },
            { name: "闽台缘博物馆", time: "下午" },
            { name: "清源山风景区", time: "次日上午" },
            { name: "泉州动物园", time: "次日下午" }
        ],
        "3天摄影": [
            { name: "五店市传统建筑群", time: "上午" },
            { name: "石狮渔港日落", time: "傍晚" },
            { name: "中山路骑楼街景", time: "次日上午" },
            { name: "安平桥", time: "次日下午" },
            { name: "西湖公园荷花池", time: "第三天早晨" }
        ]
    };

    const key = `${days}天${interests}`;
    const itinerary = sampleData[key] || [];

    if (itinerary.length === 0) {
        output += `<li>暂无匹配行程，请重新选择偏好</li>`;
    } else {
        itinerary.forEach((item, index) => {
            output += `<li data-index="${index}" draggable="true" ondragstart="dragStart(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
                <strong>${item.time}</strong> - ${item.name}
                <button class="remove-btn" onclick="removeItem(${index})">×</button>
            </li>`;
        });
    }

    output += `</ul>`;
    document.getElementById('itineraryOutput').innerHTML = output;

    // 启用按钮
    document.getElementById('exportBtn').disabled = false;
    document.getElementById('saveBtn').disabled = false;
}

function removeItem(index) {
    const list = document.querySelectorAll('#itineraryList li');
    if (list[index]) {
        list[index].remove();
    }
}

// 拖拽支持
let draggedItem = null;

function dragStart(e) {
    draggedItem = e.target;
    e.dataTransfer.effectAllowed = 'move';
}

function allowDrop(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
}

function drop(e) {
    e.preventDefault();
    if (draggedItem && e.target.tagName !== 'LI') return;
    e.target.parentNode.insertBefore(draggedItem, e.target.nextSibling);
}

function exportToPDF() {
    alert("该功能需集成 PDF.js 或浏览器打印功能实现");
}

function saveItinerary() {
    alert("该功能需接入用户系统及后端存储");
}
</script>

</body>
</html>